<template>
	<div class="left-panel_wrap">
		<div class="panel-item-title">氢能统计</div>

		<div class="stats-box">
			<div class="stats-item">
				<div class="stats-item-num">
					{{ statsData[0].value }}
					<span class="stats-item-nuit">吨</span>
				</div>
				<div class="stats-item-label">今日加氢量</div>
			</div>
			<div class="stats-item">
				<div class="stats-item-num">
					{{ statsData[1].value }}
					<span class="stats-item-nuit">次</span>
				</div>
				<div class="stats-item-label">今日加氢次数</div>
			</div>
			<div class="stats-item">
				<div class="stats-item-num">
					{{ statsData[2].value }}
					<span class="stats-item-nuit">吨</span>
				</div>
				<div class="stats-item-label">累计加氢量</div>
			</div>
			<div class="stats-item">
				<div class="stats-item-num">
					{{ statsData[3].value }}
					<span class="stats-item-nuit">吨</span>
				</div>
				<div class="stats-item-label">今日售氢量</div>
			</div>
			<div class="stats-item">
				<div class="stats-item-num">
					{{ statsData[4].value }}
					<span class="stats-item-nuit">吨</span>
				</div>
				<div class="stats-item-label">今日制氢量</div>
			</div>
			<div class="stats-item">
				<div class="stats-item-num">
					{{ statsData[5].value }}
					<span class="stats-item-nuit">吨</span>
				</div>
				<div class="stats-item-label">实时储氢量</div>
			</div>
		</div>

		<div class="panel-item-title">各项数据占比</div>

		<div class="percentage-box">
			<div class="tab-box">
				<span class="tab-item is_act">用电来源</span>
				<span class="tab-line"></span>
				<span class="tab-item">氢能用途</span>
			</div>

			<div class="chart-box">
				<div class="chart-container" ref="pieChart"></div>
				<div class="legend-box">
					<div class="legend-item">
						<span class="legend-item-rect" style="background-color:#FCDB24 "></span>
						<span class="legend-item-label">光伏</span>
						<img class="legend-item-line" src="../../assets/images/largeScreen/bg_line.png" alt="" />
						<span class="legend-item-num">{{chartData[0].value.toFixed(2)}}%</span>
					</div>
					<div class="legend-item">
						<span class="legend-item-rect" style="background-color:#74C2F3 "></span>
						<span class="legend-item-label">谷电</span>
						<img class="legend-item-line" src="../../assets/images/largeScreen/bg_line.png" alt="" />
						<span class="legend-item-num">{{chartData[1].value.toFixed(2)}}%</span>
					</div>
					<div class="legend-item">
						<span class="legend-item-rect" style="background-color:#1EFF85 "></span>
						<span class="legend-item-label">峰电</span>
						<img class="legend-item-line" src="../../assets/images/largeScreen/bg_line.png" alt="" />
						<span class="legend-item-num">{{chartData[2].value.toFixed(2)}}%</span>
					</div>
				</div>
			</div>
		</div>

		<div class="panel-item-title">储氢罐状态</div>

		<div class="cqg-type-box">
			<vue-scroll :ops="$root.scrollOpsY">
				<div class="list-item" v-for="(item, index) in cqgTypeList">
					<div class="list-item-info">
						<span class="info-num">{{ index < 9 ? 0 : '' }}{{ index + 1 }}</span>
						<span class="info-parameter">{{ item.parameter }}</span>
						<span class="info-percentage">{{ item.percentage }}%</span>
						<span class="info-pa">{{ item.pa }}</span>
					</div>
					<el-progress :percentage="item.percentage" :class="item.color"></el-progress>
				</div>
			</vue-scroll>
		</div>
	</div>
</template>

<script>
import { queryTempquery } from '@/axios/api';
export default {
	data() {
		return {
			statsData: [4800, 4800, 4800, 4800, 4800, 4800],
			colorList: ['#FCDB24', '#74C2F3', '#1EFF85'],
			chartData: [{ value: 30, name: '光伏' }, { value: 30, name: '谷电' }, { value: 40, name: '峰电' }],
			cqgTypeList: [
				{ color: 'is_blue', parameter: '（20Mpa）', percentage: 75, pa: '12Pa' },
				{ color: 'is_blue', parameter: '（20Mpa）', percentage: 90, pa: '16Pa' },
				{ color: 'is_blue', parameter: '（20Mpa）', percentage: 50, pa: '16Pa' },
				{ color: 'is_yellow', parameter: '（45Mpa）', percentage: 60, pa: '10Pa' },
				{ color: 'is_yellow', parameter: '（45Mpa）', percentage: 40, pa: '11Pa' },
				{ color: 'is_yellow', parameter: '（45Mpa）', percentage: 90, pa: '8Pa' },
				{ color: 'is_yellow', parameter: '（45Mpa）', percentage: 75, pa: '16Pa' },
				{ color: 'is_yellow', parameter: '（45Mpa）', percentage: 40, pa: '12Pa' },
				{ color: 'is_yellow', parameter: '（45Mpa）', percentage: 80, pa: '8Pa' }
			],
			timer:null
		};
	},
	mounted() {
		clearInterval(this.timer);
		let that = this;
		that.initLeft();
		this.timer = setInterval(function(){
			that.initLeft();
		},1000*5)
	},
	destroyed() {
		if( this.timer ) {
			clearInterval(this.timer);
		}
	},
	methods: {
		initLeft() {
			let target = {
				h_1: {
					ch: 'virtual',
					adr: 11161,
					val: 0
				},
				h_2: {
					ch: 'virtual',
					adr: 11162,
					val: 0
				},
				h_3: {
					ch: 'virtual',
					adr: 11163,
					val: 0
				},
				h_4: {
					ch: 'virtual',
					adr: 11164,
					val: 0
				},
				h_5: {
					ch: 'virtual',
					adr: 11165,
					val: 0
				},
				h_6: {
					ch: 'virtual',
					adr: 11166,
					val: 0
				},
				h_7: {
					ch: 'virtual',
					adr: 11167,
					val: 0
				},
				h_8: {
					ch: 'virtual',
					adr: 11168,
					val: 0
				},
				h_9: {
					ch: 'virtual',
					adr: 11169,
					val: 0
				},
				h_10: {
					ch: 'virtual',
					adr: 11170,
					val: 0
				},
				h_11: {
					ch: 'virtual',
					adr: 11171,
					val: 0
				},
				h_12: {
					ch: 'virtual',
					adr: 11172,
					val: 0
				},
				h_13: {
					ch: 'virtual',
					adr: 11173,
					val: 0
				},
				h_14: {
					ch: 'virtual',
					adr: 11174,
					val: 0
				},
				hs_1: {
					ch: 'h2-01',
					adr: 16385,
					val: 0
				},
				hs_2: {
					ch: 'h2-01',
					adr: 16386,
					val: 0
				},
				hs_3: {
					ch: 'h2-01',
					adr: 16387,
					val: 0
				},
				hs_4: {
					ch: 'h2-01',
					adr: 16388,
					val: 0
				},
				hs_5: {
					ch: 'h2-01',
					adr: 16389,
					val: 0
				},
				hs_6: {
					ch: 'h2-01',
					adr: 16390,
					val: 0
				},
				hs_7: {
					ch: 'h2-01',
					adr: 16391,
					val: 0
				},
				hs_8: {
					ch: 'h2-01',
					adr: 16392,
					val: 0
				},
				hs_9: {
					ch: 'h2-01',
					adr: 16393,
					val: 0
				},
				hs_10: {
					ch: 'h2-01',
					adr: 16394,
					val: 0
				},
				hs_11: {
					ch: 'h2-01',
					adr: 16395,
					val: 0
				},
				hs_12: {
					ch: 'h2-01',
					adr: 16396,
					val: 0
				},
				hs_13: {
					ch: 'h2-01',
					adr: 16397,
					val: 0
				},
				hs_14: {
					ch: 'h2-01',
					adr: 16398,
					val: 0
				},
				hs_15: {
					ch: 'h2-01',
					adr: 16399,
					val: 0
				},
				hs_16: {
					ch: 'h2-01',
					adr: 16400,
					val: 0
				},
				hs_17: {
					ch: 'h2-01',
					adr: 16401,
					val: 0
				},
				hs_18: {
					ch: 'h2-01',
					adr: 16402,
					val: 0
				},
				hs_19: {
					ch: 'h2-01',
					adr: 16403,
					val: 0
				},
				hs_20: {
					ch: 'h2-01',
					adr: 16404,
					val: 0
				},
				hs_21: {
					ch: 'h2-01',
					adr: 16405,
					val: 0
				},
				hs_22: {
					ch: 'h2-01',
					adr: 16406,
					val: 0
				},
				hs_23: {
					ch: 'h2-01',
					adr: 16407,
					val: 0
				},
				hs_24: {
					ch: 'h2-01',
					adr: 16408,
					val: 0
				},
				hs_25: {
					ch: 'h2-01',
					adr: 16409,
					val: 0
				},
				hs_26: {
					ch: 'h2-01',
					adr: 16410,
					val: 0
				},
				hs_27: {
					ch: 'h2-01',
					adr: 16411,
					val: 0
				}
			};
			let re_og = {};
			for (var key in target) {
				if (!(re_og[target[key].ch] instanceof Array)) {
					re_og[target[key].ch] = [];
				}
				re_og[target[key].ch].push(target[key].adr);
			}
			let payload = [];
			for (var key in re_og) {
				let ele = {};
				ele.target = key;
				ele.address = re_og[key].sort((a, b) => {
					return a - b;
				});
				payload.push(ele);
			}
			this.$api.queryTempquery(payload).then(res => {
				this.statsData = res[0].result;
				this.orginData = res[1].result;
				this.chartData = [{ value: this.orginData[0].value, name: '光伏' },{ value: this.orginData[1].value, name: '谷电' },{ value: this.orginData[2].value, name: '峰电' }];
				this.chartLoad({
					data: this.chartData
				});
				this.cqgTypeList = [
					{ color: 'is_blue', parameter:'（20Mpa）', percentage: parseFloat((this.orginData[3].value/20.0*100).toFixed(0)), pa: parseFloat((this.orginData[3].value).toFixed(2)) + 'MPa' },
					{ color: 'is_blue', parameter:'（20Mpa）', percentage: parseFloat((this.orginData[4].value/20.0*100).toFixed(0)), pa: parseFloat((this.orginData[4].value).toFixed(2)) + 'MPa' },
					{ color: 'is_blue', parameter:'（20Mpa）', percentage: parseFloat((this.orginData[5].value/20.0*100).toFixed(0)), pa: parseFloat((this.orginData[5].value).toFixed(2)) + 'MPa'},
					{ color: 'is_yellow', parameter:'（45Mpa）', percentage: parseFloat((this.orginData[6].value/45.0*100).toFixed(0)), pa: parseFloat((this.orginData[6].value).toFixed(2)) + 'MPa' },
					{ color: 'is_yellow', parameter:'（45Mpa）', percentage: parseFloat((this.orginData[7].value/45.0*100).toFixed(0)), pa: parseFloat((this.orginData[7].value).toFixed(2)) + 'MPa'},
					{ color: 'is_yellow', parameter:'（45Mpa）', percentage: parseFloat((this.orginData[8].value/45.0*100).toFixed(0)), pa: parseFloat((this.orginData[8].value).toFixed(2)) + 'MPa'},
					{ color: 'is_yellow', parameter:'（45Mpa）', percentage: parseFloat((this.orginData[9].value/45.0*100).toFixed(0)), pa: parseFloat((this.orginData[9].value).toFixed(2)) + 'MPa'},
					{ color: 'is_yellow', parameter:'（45Mpa）', percentage: parseFloat((this.orginData[10].value/45.0*100).toFixed(0)), pa: parseFloat((this.orginData[10].value).toFixed(2)) + 'MPa'},
					{ color: 'is_yellow', parameter:'（45Mpa）', percentage: parseFloat((this.orginData[11].value/45.0*100).toFixed(0)), pa: parseFloat((this.orginData[11].value).toFixed(2)) + 'MPa' }
				].map(value => ({...value, color: value.percentage<90? 'is_blue': 'is_yellow'}));
			});
		},
		chartLoad(obj) {
			var _this = this;
			var chart = this.$echarts.init(this.$refs.pieChart);

			var option = {
				legend: {
					show: false,
					orient: 'vertical',
					top: 'middle',
					right: '5%',
					textStyle: {
						color: '#f2f2f2',
						fontSize: 25
					},
					icon: 'roundRect'
				},
				series: [
					// 主要展示层的
					{
						radius: ['67%', '100%'],
						center: ['50%', '50%'],
						type: 'pie',
						hoverAnimation: false,
						itemStyle: {
							normal: {
								color: function(params) {
									return _this.colorList[params.dataIndex];
								}
							}
						},
						labelLine: {
							show: false
						},
						data: obj.data
					},
					// 边框的设置
					{
						radius: ['67%', '95%'],
						center: ['50%', '50%'],
						type: 'pie',
						hoverAnimation: false,
						label: {
							show: false
						},
						labelLine: {
							normal: {
								show: false
							},
							emphasis: {
								show: false
							}
						},
						animation: false,
						tooltip: {
							show: false
						},
						itemStyle: {
							normal: {
								color: 'rgba(0,0,0,0.4)'
							}
						},
						data: [
							{
								value: 1
							}
						]
					}
				]
			};

			chart.setOption(option);
		}
	}
};
</script>

<style lang="less" scoped>
.left-panel_wrap {
	width: 100%;
	height: 100%;
	padding-left: 50px;
	padding-top: 42px;
	box-sizing: border-box;

	> .stats-box {
		height: 236px;
		width: 100%;

		> .stats-item {
			display: inline-block;
			vertical-align: top;
			width: calc(100% / 3 - 20px);
			height: 100px;
			text-align: center;
			padding-top: 36px;
			box-sizing: border-box;
			background-image: url('../../assets/images/largeScreen/bg_item.png');
			background-repeat: no-repeat;
			background-position: center 38px;
			background-size: 80px auto;
			margin-right: 30px;

			> .stats-item-num {
				font-size: 20px;
				color: #ffffff;
				font-weight: 600;

				.stats-item-nuit {
					font-size: 12px;
					color: rgba(255, 255, 255, 0.54);
					font-weight: 400;
					margin-left: 5px;
				}
			}

			> .stats-item-label {
				color: #b7cdff;
				font-size: 12px;
				margin-top: 25px;
			}

			&:nth-of-type(3n) {
				margin-right: 0;
			}
		}
	}

	> .percentage-box {
		width: 100%;
		height: 234px;
		padding-top: 20px;
		box-sizing: border-box;

		> .tab-box {
			width: 100%;
			height: 18px;

			> .tab-item {
				display: inline-block;
				vertical-align: middle;
				color: #4e6f92;
				font-size: 14px;

				&.is_act {
					color: #74c2f3;
				}
			}

			> .tab-line {
				display: inline-block;
				vertical-align: middle;
				width: 1px;
				height: 12px;
				background: #4e6f92;
				margin: 0 15px;
			}
		}

		> .chart-box {
			width: 100%;
			height: 128px;
			margin-top: 20px;

			> .chart-container {
				width: 128px;
				height: 100%;
				display: inline-block;
				vertical-align: top;
				position: relative;

				&:after {
					content: ' ';
					width: 20px;
					height: 27px;
					position: absolute;
					top: 0;
					right: 0;
					left: 0;
					bottom: 0;
					margin: auto;
					background-image: url('../../assets/images/largeScreen/icon_lightning.png');
					background-size: 100% 100%;
				}
			}

			> .legend-box {
				width: calc(100% - 128px);
				height: 100%;
				display: inline-block;
				vertical-align: top;
				padding-left: 37px;
				box-sizing: border-box;
				padding-top: 21px;

				> .legend-item {
					margin-bottom: 21px;
					line-height: 16px;

					> .legend-item-rect {
						display: inline-block;
						vertical-align: middle;
						width: 12px;
						height: 12px;
						border-radius: 2px;
						margin-right: 6px;
					}

					> .legend-item-label {
						display: inline-block;
						vertical-align: middle;
						font-size: 12px;
						color: #b7cdff;
					}

					> .legend-item-line {
						vertical-align: middle;
						margin: 0 5px;
					}

					> .legend-item-num {
						display: inline-block;
						vertical-align: middle;
						font-size: 12px;
						color: #ffffff;
					}
				}
			}
		}
	}

	> .cqg-type-box {
		width: 100%;
		height: calc(100% - 580px - 10px);
		margin-top: 10px;

		.list-item {
			margin-top: 10px;
			width: 94%;

			.list-item-info {
				font-size: 12px;
				color: #aee0ff;
				position: relative;

				> .info-num {
					display: inline-block;
					vertical-align: middle;
				}

				> .info-parameter {
					display: inline-block;
					vertical-align: middle;
					color: #4e6f92;
				}

				> .info-percentage {
					position: absolute;
					font-size: 14px;
					color: #dff3ff;
					font-weight: 600;
					right: 80px;
				}

				> .info-pa {
					position: absolute;
					font-size: 14px;
					color: #dff3ff;
					font-weight: 600;
					right: 0px;
				}
			}

			.el-progress {
				/deep/.el-progress-bar {
					padding-right: 0;

					.el-progress-bar__outer {
						background-color: #2c4359;
					}
				}

				/deep/.el-progress__text {
					display: none;
				}

				&.is_blue {
					/deep/.el-progress-bar__inner {
						background: linear-gradient(to right, #061525, #1fa9ff);
					}
				}

				&.is_yellow {
					/deep/.el-progress-bar__inner {
						background: linear-gradient(to right, #061525, #fffa1f);
					}
				}
			}
		}
	}
}
</style>
